<template>
	<!-- 保养事件 -->
	<div class="layout-padding">
		<basic-container class="layout-padding-auto layout-padding-view">
			<avue-crud
				ref="crud"
				v-model="form"
				:page="page"
				:data="tableData"
				:permission="permissionList"
				:table-loading="tableLoading"
				:option="tableOption"
				:before-open="handleOpenBefore"
				:cell-class-name="addClass"
				@on-load="getList"
				@search-change="searchChange"
				@refresh-change="refreshChange"
				@size-change="sizeChange"
				@current-change="currentChange"
				@cell-click="clickCell"
				@row-update="handleUpdate"
				@row-save="handleSave"
				@row-del="rowDel"
				@selection-change="selectionChange"
			>
				<template #menu-left>
					<!-- v-if='permissions.om_omrepairevent_del' -->
					<el-button class="filter-item" plain type="primary" icon="el-icon-delete" @click="plDelete"> 批量删除 </el-button>
					<!--          <el-button-->
					<!--              v-if='permissions.om_omrepairevent_export'-->
					<!--              class="filter-item"-->
					<!--              plain-->
					<!--              type="primary"-->
					<!--              icon="el-icon-download"-->
					<!--              @click="exportExcel">导出-->
					<!--          </el-button>-->
				</template>
				<template #eventStatus="{ row }">
					<el-tag v-if="row.eventStatus === '6'">未指派</el-tag>
					<el-tag v-if="row.eventStatus === '0'">待处理</el-tag>
					<el-tag type="warning" v-if="row.eventStatus === '1'">处理中</el-tag>
					<el-tag type="success" v-if="row.eventStatus === '2'">已处理</el-tag>
					<el-tag type="success" v-if="row.eventStatus === '3'">转工单</el-tag>
					<el-tag type="info" v-if="row.eventStatus === '4'">事件关闭</el-tag>
					<el-tag type="success" v-if="row.eventStatus === '5'">已评价</el-tag>
					<el-tag type="success" v-if="row.eventStatus === '7'">已取消</el-tag>
					<el-tag type="success" v-if="row.eventStatus === '8'">已打开</el-tag>
				</template>
				<template #menu="scope">
					<el-button
						type="primary"
						icon="el-icon-edit"
						text
						:disabled="scope.row.eventStatus === '4'"
						@click="$refs.crud.rowEdit(scope.row, scope.index)"
						>编辑
					</el-button>
					<el-button type="primary" text icon="el-icon-delete" @click="$refs.crud.rowDel(scope.row, scope.index)">删除 </el-button>
					<!-- v-if='permissions.om_omrepairevent_controls' -->
					<el-dropdown>
						<span class="el-dropdown-link" style="margin-left: 5px">
							操作
							<el-icon class="el-icon--right" style="margin-left: -2px">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item
									:disabled="
										scope.row.eventStatus === '2' ||
										scope.row.eventStatus === '3' ||
										scope.row.eventStatus === '4' ||
										scope.row.eventStatus === '5' ||
										scope.row.eventStatus === '7'
									"
									@click="changeEvent(scope.row)"
									>转工单
								</el-dropdown-item>
								<el-dropdown-item :disabled="scope.row.eventStatus === '4'" @click="closeEvent(scope.row)">关闭 </el-dropdown-item>
								<el-dropdown-item
									:disabled="scope.row.eventStatus === '0' || scope.row.eventStatus === '1' || scope.row.eventStatus === '5'"
									@click="appraiseEvent(scope.row)"
									>取消
								</el-dropdown-item>
								<el-dropdown-item :disabled="scope.row.eventStatus === '0'" @click="openEvent(scope.row)">打开 </el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<template #eventArea-form>
					<avue-input-tree
						filterable
						v-model="form.eventArea"
						:dic="treeLocationData"
						:props="defaultProps"
						type="tree"
						placeholder="请选择事件区域"
					></avue-input-tree>
				</template>
				<template #equipName-form>
					<div class="span-title">
						<div class="span-input">
							<el-input v-model="form.equipName" placeholder="请选择设备"></el-input>
						</div>
						<div class="span-btn">
							<el-button type="primary" plain @click="getDevForm">选择设备 </el-button>
						</div>
					</div>
				</template>
				<template #fileList-form>
					<ImgUpload @changeFile="changeFile" :fileData="fileData" />
				</template>
			</avue-crud>
		</basic-container>
		<el-dialog v-if="dialogFormVisible3" v-model="dialogFormVisible3" title="取消工单" width="38%" @close="dialogFormVisible3Close">
			<el-form-item label="取消意见">
				<el-input type="textarea" v-model="confirmSug"></el-input>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible3 = false">取消</el-button>
					<el-button type="primary" @click="confirmAppraise"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
		<OmeventInfo ref="omeventInfo"></OmeventInfo>
		<DevForm ref="devFormRef" @getDeviceName="getDeviceName"></DevForm>
	</div>
</template>

<script>
import { fetchList, addObj, putObj, delObj, delAllObj, fetchTree, operaEvent, getEventName } from '/@/api/maintenance/upkeep/event';
import { getUserById } from '/@/api/maintenance/order';
import OmeventInfo from './info/index.vue';
import DevForm from "/@/views/om/eventmanagement/devForm/index.vue";
import ImgUpload from '/@/components/ImageUpload/order.vue';
import { tableOption } from '/@/const/crud/maintenance/upkeep/event';
//   import {mapGetters} from 'vuex'
import template from '/@/views/ommaintenance/repair/template/index.vue';

export default {
	name: 'event',
	components: { template, OmeventInfo, DevForm, ImgUpload },
	data() {
		return {
			selectList: [],
			form: {},
			treeLocationData: [],
			defaultPropstree: {
				label: 'name',
				value: 'id',
			},
			fileList: [],
			fileData: [],
			searchForm: {},
			tableData: [],
			orderUserData: [],
			modelTypeData: [],
			devTypeData: [],
			deviceNameData: [],
			defaultProps: {
        label: 'subareaCn',
        value: 'subareaCode',
        children:'childrens'
			},
			defaultProps5: {
				label: 'bamAssetsTypeAlias',
				value: 'bamAssetsTypeCode',
			},
			defaultProps6: {
				label: 'bamAAssetsModelCn',
				value: 'bamAAssetsDeviceCode',
			},
			defaultProps7: {
				label: 'assetsName',
				value: 'assetsName',
			},
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			tableLoading: false,
			tableOption: tableOption,
			dialogFormVisible: false,
			handleDept: '',
			handleUser: '',
			handleDeptData: [],
			handleUserData: [],
			defaultProps1: {
				label: 'name',
				value: 'id',
			},
			defaultProps2: {
				label: 'name',
				value: 'userId',
			},
			dialogFormVisible3: false,
			confirmSug: '',
			eventNo: '',
			openType: '',
		};
	},
	computed: {
		//   ...mapGetters(['permissions', 'userInfo']),
		permissionList() {
			return {
				//   getBtn: this.validData(this.permissions.om_omrepairevent_get, false),
				//   addBtn: this.validData(this.permissions.om_omrepairevent_add, false),
				//   editBtn: this.validData(this.permissions.om_omrepairevent_edit, false),
				//   delBtn: this.validData(this.permissions.om_omrepairevent_del, false),
			};
		},
		userId() {
			return JSON.parse(sessionStorage.getItem('pig-userInfo')).content.userId;
		},
	},
	watch: {
		'form.sourceOfEvent': {
			handler(val, oldVal) {
				if (val && val !== oldVal && this.openType === 'add') {
					let type =
						val === '1'
							? '电话报修'
							: '' || val === '2'
							? '系统生成'
							: '' || val === '3'
							? '巡检生成'
							: '' || val === '4'
							? '保养报修'
							: '' || val === '5'
							? '其他报修'
							: '';
					getEventName(type).then((res) => {
						this.form.eventName = res.data;
					});
				}
			},
		},
		'form.handleUserId': {
			handler(val, oldVal) {
				if (val) {
					getUserById(val).then((res) => {
						this.orderUserData = res.data;
						this.form.handleUserPhone = this.orderUserData.phone;
						this.form.handleUserName = this.orderUserData.name;
					});
				} else {
					this.form.handleUserPhone = '';
				}
			},
		},
	},
	methods: {
		dialogFormVisible3Close() {
			this.dialogFormVisible3 = false;
			this.confirmSug = '';
		},
		getList(page, params) {
			this.tableLoading = true;
			fetchList(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
					},
					params,
					this.searchForm
				)
			)
				.then((response) => {
					this.tableData = response.data.records;
					this.page.total = response.data.total;
					this.tableLoading = false;
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除事件' + '"' + row.eventNo + '"', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delObj(row.evId);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((error) => {});
		},
		handleUpdate: function (row, index, done, loading) {
			row.handleType = 0 + '';
			putObj(row)
				.then((data) => {
					this.$message.success('修改成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		handleSave: function (row, done, loading) {
			row.handleType = 0 + '';
			addObj(row)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		currentChange(current) {
			this.page.currentPage = current;
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		refreshChange() {
			this.getList(this.page);
		},
		handleOpenBefore(show, type) {
			this.openType = type;
			//区域树
			fetchTree().then((res) => {
				this.treeLocationData = res.data.records;
			});
			if (type === 'add') {
				this.fileData = [];
				this.$refs.devFormRef.selectRow = -1;
			}
			if (type === 'edit') {
				this.fileData = this.form.fileList;
			}
			show();
		},
		changeEvent(row) {
			this.$confirm('是否确认转工单', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					operaEvent({ eventNo: row.eventNo, eventStatus: 3 + '' }).then((res) => {
						this.$message.success('转工单成功');
						this.getList(this.page);
					});
				})
				.catch(() => {});
		},
		openEvent(row) {
			this.$confirm('是否确认打开', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					operaEvent({ eventNo: row.eventNo, eventStatus: 8 + '' }).then((res) => {
						this.$message.success('打开成功');
						this.getList(this.page);
					});
				})
				.catch(() => {});
		},
		closeEvent(row) {
			this.$confirm('是否确认关闭事件', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					operaEvent({ eventNo: row.eventNo, eventStatus: 4 + '' }).then((res) => {
						this.$message.success('关闭成功');
						this.getList(this.page);
					});
				})
				.catch(() => {});
		},
		appraiseEvent(row) {
			this.dialogFormVisible3 = true;
			this.eventNo = row.eventNo;
		},
		confirmAppraise() {
			let obj = {
				eventNo: this.eventNo,
				remark: this.confirmSug,
				eventStatus: 7 + '',
			};
			operaEvent(obj)
				.then((res) => {
					this.$message.success('事件已取消');
					this.dialogFormVisible3 = false;
					this.getList(this.page);
				})
				.catch((err) => this.$message.error(err));
		},
		addClass({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 2) {
				return 'cell-blue';
			}
		},
		clickCell(row, column, cell, event) {
			if (column.label === '事件编码') {
				this.$refs.omeventInfo.dialogVisible = true;
				this.$refs.omeventInfo.infoData = row;
			}
		},
		getDevForm() {
			this.$refs.devFormRef.visible = true;
		},
		getDeviceName(list) {
      this.form.equipName = list.deviceName
      this.form.equipNo = list.unitNo
      this.form.eventArea = list.subareaCode
		},
		changeFile(list) {
			this.form.fileList = list;
			this.form.fileList.forEach((item) => {
				item.eventNo = this.form.eventNo;
			});
		},
		selectionChange(list) {
			this.selectList = list;
		},
		//批量删除
		plDelete() {
			if (this.selectList.length > 0) {
				this.$confirm('是否确认删除以选择的数据', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						let ids = [];
						this.selectList.forEach((data) => {
							ids.push(data?.evId);
						});
						return delAllObj(ids)
							.then((res) => {
								this.$message.success('删除成功');
								this.getList(this.page);
							})
							.catch(() => {
								this.$message.error('删除失败');
							});
					})
					.then((data) => {})
					.catch((cancelorerror) => {});
			}
		},
		// 导出
		exportExcel() {
			this.downBlobFile('/om/omrepairmodel/export', this.searchForm, '设备维修模版.xlsx');
		},
	},
};
</script>
<style lang="scss" scoped>
.span-title {
	display: flex;

	.span-input {
		flex: 2;
	}
}

.theme-white .el-dropdown {
	margin-top: 7px;
}

.cell-blue {
	cursor: pointer !important;
	color: #409eff !important;
}
::v-deep .avue-crud__menu {
	display: flex;
	align-items: center;
}
</style>
